<template>
  <div class="user-info-box">
    <!-- 未登陆 注册样式 -->
    <div v-if="!loginUserObj" class="flex-col no-login-box">
      <div class="user-img-box flex flex-center">
        <img class="width-60 height-60" :src="enterpriseConfig ? enterpriseConfig.websiteDefaultLogo : ''" alt="">
      </div>
      <div class="pad-l-25 pad-r-27 mar-t-17">
        <span class="font-14 font-color-6">Hi, 欢迎来到{{enterpriseConfig ? enterpriseConfig.websiteTitle : ''}}</span>
      </div>
      <div class="pad-l-25 pad-r-27 mar-t-19 btn-group flex-col">
        <div class="login-btn cursor-p flex flex-center" @click="login">一键登录</div>
        <div class="register-btn cursor-p flex flex-center" @click="register">免费注册</div>
      </div>
    </div>
    <div v-else>
      <div class="flex v-align-c mar-t--12 mar-b-30">
        <div class="user-img-box flex flex-center mar-l-20">
          <img class="width-60 height-60" :src="loginUserObj.avatar" alt="">
        </div>
        <div class="mar-l-10 font-16">{{ loginUserObj.phone }}</div>
      </div>
      <div class="flex v-align-c text-align-c">
        <div class="flex-item mar-l-11">
          <div class="font-18 font-w mar-b-3">0</div>
          <div>待付款</div>
        </div>
        <div class="flex-item mar-r-11">
          <div class="font-18 font-w mar-b-3">0</div>
          <div>待发货</div>
        </div>
      </div>
      <div class="flex v-align-c text-align-c pad-t-30 mar-t-2">
        <div class="flex-item mar-l-11">
          <div class="font-18 font-w mar-b-3">0</div>
          <div>待收货</div>
        </div>
        <div class="flex-item mar-r-11">
          <div class="font-18 font-w mar-b-3">0</div>
          <div>待售后</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    name: 'LoginSlider',
    setup() {
      const router = useRouter()
      const storeState = useState('user', ['loginUserObj'])
      const enterpriseConfigStoreState = useState('enterpriseConfig', ['enterpriseConfig'])
      onMounted(() => {})
      const login = () => {
        router.push('/login')
      }
      const register = () => {
        router.push('/register')
      }
      return {
        login,
        register,
        ...storeState,
        ...enterpriseConfigStoreState
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .user-info-box {
    width: 232px;
    height: 253px;
    background: #fff;
    padding-top: 32px;

    .btn-group {
      &>div {
        width: 180px;
        height: 30px;
      }

      .login-btn {
        color: #fff;
        background: #182245;
      }

      .register-btn {
        border: 1px solid #182245;
        background: #fff;
        color: #182245;
        box-sizing: border-box;
        margin-top: 10px;
      }
    }
  }

  .user-img-box {
    img {
      border-radius: 50%;
    }
  }
</style>
